React 0 -> Hooks

0 -> Hooks

funcition App (){
  const [num, setNum] = useState(0)
  
  return {
    onClick (){
      setNum(num => num + 1)
    }
  }
}

React 运行环境

let isMount = true  // didMount or didUpdate
let workInProgressHook = null;

const fiber = {
  stateNode: App,
  memoizedState: null,  // 链表
  queue:{    // 队列
    pending: null
  }
}

function schedule(){
  workInProgressHook = fiber.memoizedState;
  const app = fiber.stateNode();
  isMount = false;
  return app
}

window.app = schedule()

function useState(initState){
  // 当前hook
  let hook;
  
  if(isMount){
    hook = {  // 单向链表
      memoizedState: initState,
      next: null // 指针 下一个
    }
    if(!fiber.memoizedSate){
      fiber.memoizedState = hook;
    }else{
      workInProgressHook.next  = hook
    }
     workInProgressHook  = hook
  }else{
    hook = workInProgressHook;
    workInProgressHook = workInProgressHook.next
  }
  // 取到了当前useState的数据
  
  // todo
}

function dispathAction(queue, action){
	const update ={ // 环状链表
    action,
    next
  }
  
  if(queue.pending === null) {
    // u0 -> u0 -> u0
    update.next = update
    
  }else{
    // u0 -> u0
   	// u1 -> u0 -> u1
    // queue.pending // 最后第一个
    // queue.pending.next //第一个
    update.next = queue.pending.next; // u1 -> u0
    queue.pending.next = update; // u0 -> u1
  }
  
  queue.pending = update;
  
  schedule();
}

function useState(initState){
  // 当前hook
  let hook;
  
  if(isMount){
    hook = {  // 单向链表
      memoizedState: initState,
      next: null // 指针 下一个
    }
    if(!fiber.memoizedSate){
      fiber.memoizedState = hook;
    }else{
      workInProgressHook.next  = hook
    }
     workInProgressHook  = hook
  }else{
    hook = workInProgressHook;
    workInProgressHook = workInProgressHook.next
  }
  // 取到了当前useState的数据
  
  let baseState = hook.memoizedState;
  
  if(hook.queue.pending){
    let firstupdate = hook.queue.pending.next;
    
    do{
      const action = firstUpdate.action
      baseState = action(baseState)
      firstUpdate = firstUpdate.next;
    }while(firstUpdate !== hook.queue.pending.next)
      
    hook.queue.pending = null;

  }
  hook.memoizedState = baseState;
  return [baseState, disPatchAction.bind(null, hook.queue)]
  
}

完整代码

let isMount = true;
let workInProgressHook = null   // 变量  当前处理哪一个hook

const fiber = {
    stateNode: App,
    memoizedState: null, // 保存hooks数据 一条链表 每一个hook数据
}

function schedule() {
    workInProgressHook = fiber.memoizedState
    const app = fiber.stateNode()
    isMount = false;

    return app
}


function useState(initState) {
    let hook;

    if (isMount) {
        hook = {  // 单向链表
            memoizedState: initState,
            next: null,
            queue: {
                pending: null
            }
        }
        if (!fiber.memoizedState) {
            fiber.memoizedState = hook
        } else {
            workInProgressHook.next = hook
        }
        workInProgressHook = hook
    } else {
        //  已经有一条链表了
        hook = workInProgressHook; // 取到了
        workInProgressHook = workInProgressHook.next; // 指向下一个
    }
    // 取到了当前useState对应的数据 ，then 计算新状态

    let baseState = hook.memoizedState

    if (hook.queue.pending) {
        let firstUpdate = hook.queue.pending.next // 第一个update

        do {
            const action = firstUpdate.action
            baseState = action(baseState);
            firstUpdate = firstUpdate.next // 指向下一个
        } while (firstUpdate != hook.queue.pending.next)

        hook.queue.pending = null // 计算完 清空
    }

    hook.memoizedState = baseState
    return [baseState, dispatchAction.bind(null, hook.queue)]
}

// setNum - action
function dispatchAction(queue, action) {
    // 创建数据结构update，每次更新有优先级的，click > fecth
    const update = {
        action, // 环装链表
        next: null
    }

    // 链表操作
    if (queue.pending === null) {
        update.next = update
    } else {
        // u0 -> u0
        // u1 -> u0 -> u1
        // queue.pending 最后一个update
        // queue.pending.next 第一个update
        console.log("第一个update",queue.pending.next)
        console.log("最后一个update",queue.pending)
        update.next = queue.pending.next; // u1 => u0
        queue.pending.next = update; // u0 => u1
    }
    // 每次执行就是最后一个update
    queue.pending = update

    schedule()
}

// FC 保存hooks数据
function App() {
    const [num, setNum] = useState(0)
    const [num1, setNum1] = useState(10)
    const [num2, setNum2] = useState(22)


    console.log(isMount)
    console.log("num",num)
    console.log("num1",num1)
    console.log("num2",num2)
    console.log("----")

    return {
        onClick() {
            setNum(num => num + 1)
        },
        set() {
            setNum1(num => num + 10)
        },
        set2() {
            setNum2(num => num + 10)
        }
    }
}

window.app = schedule()